<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>

    <!-- 登录按钮 -->
    <!-- 
      小程序中的"登录": 
      1. 授权微信 将自己的信息 交给对应的小程序  wx.getUserProfile()               - 已完成
      2. 需要 wx.login() 获取一个临时登录凭证 code                               - 已完成
      3. 发请求 (5个必传参数 其中有4个 第一步已经获取到了  差一个code) 获取token      - 需要权限
     -->
    <button type="primary" class="btn-login" @click="getUserProfile">
      一键登录
    </button>

    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<script>
export default {
  methods: {
    async getUserProfile() {
      // 借用微信的能力 获取个人资料 => wx.getUserProfile
      // console.log(111)
      const [err, res] = await uni.getUserProfile({
        // 必传 用于审核 获取用户信息的目的
        desc: '用于一键登录获取用户信息',
      })

      if (err) return this.$msg('获取用户信息失败')

      console.log('用户信息:', res) // res.userInfo 就是用户信息
      this.$store.commit('user/setUserInfo', res.userInfo)

      this.getToken(res)
    },

    async getToken(res) {
      // 2  获取 code
      const [err, res2] = await uni.login()
      // console.log(res)
      if (err) return this.$msg('获取登录凭证失败')

      console.log('登录凭证:', res2.code)
      // 3 发请求给后台 获取token
      const { message, meta } = await this.$http.post('/users/wxlogin', {
        encryptedData: res.encryptedData,
        rawData: res.rawData,
        signature: res.signature,
        iv: res.iv,
        code: res2.code,
      })
      // console.log(res3)
      if (meta.status !== 200) return this.$msg()

      console.log('用户token:', message.token)
      this.$store.commit('user/setToken', message.token)

      // 加点判断
      // 一键登录后 可能需要回跳到某个页面, 这边将来依据业务需求 额外处理一下
      // 检查仓库中有无回跳地址 有 表示需要回跳; 没有 不用回调
      // console.log(this.$store.state.user.redirectInfo)
      const info = this.$store.state.user.redirectInfo
      if (info) {
        // 需要回跳
        if (info.type === 'tab') {
          // tab页面
          uni.switchTab({
            url: info.url,
          })
        } else {
          uni.navigateTo({
            url: info.url,
          })
        }

        // 回跳成功后  记得清除回跳信息
        this.$store.commit('user/setRedirectInfo', null)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 80rpx;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 200rpx;
    margin: 30rpx 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 24rpx;
    color: gray;
  }
}
</style>
